<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Modals | Perfect Admin - Responsive HTML5 Admin Template</title>
	<meta name="keywords" content="HTML5 Admin Template" />
	<meta name="description" content="Perfect Admin - Responsive HTML5 Admin Template">
	<meta name="author" content="perfectusinc.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- Google Web Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> 
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="http://cdn.bootstrapmb.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <!-- Page CSS -->
	<link rel="stylesheet" href="../../assets/css/elements/modals.css">
    <!-- Custom CSS Starts -->
    <link rel="stylesheet" href="../../assets/css/skin/all-skins.css">
    <link rel="stylesheet" href="../../assets/css/general/style.css">
    <link rel="stylesheet" href="../../assets/css/sidebar/side-nav.css">
	<link rel="stylesheet" href="../../assets/css/fonts/fonts-style.css">
	<link rel="stylesheet" href="../../assets/css/nanoscroller/nanoscroller.css">
</head>

<body class="sidebar-mini fixed skin-blue">
    <div class="wrapper">
		<!-- Header Section Starts -->
		<header class="main-header">
			<!-- Logo -->
			<a href="../../index2.html" class="logo">
				<!-- mini logo for sidebar mini 50x50 pixels -->
				<span class="logo-mini"><b>P</b>AD</span>
				<!-- logo for regular state and mobile devices -->
				<span class="logo-lg"><b>Perfect </b>Admin</span>
			</a>
			<nav class="navbar navbar-static-top">
				<!-- Sidebar toggle button-->
				<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
					<span class="sr-only">Toggle navigation</span>
				</a>

				<div class="navbar-custom-menu">
					<ul class="nav navbar-nav">
						<!-- Messages Section Starts-->
						<li class="dropdown messages-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-envelope-o"></i>
								<span class="label label-success">4</span>
							</a>
							<ul class="dropdown-menu">
								<li class="header">You have 4 messages</li>
								<li>
									<!-- Inner Menu Starts -->
									<ul class="menu">
										<li>
											<!-- Message Area Starts -->
											<a href="#">
												<h4>
													Support Team
													<small><i class="fa fa-clock-o"></i> 5 mins</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<!-- Message Area Ends -->
										<li>
											<a href="#">
												<h4>
													Perfectus Design Team
													<small><i class="fa fa-clock-o"></i> 2 hours</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h4>
													Developers
													<small><i class="fa fa-clock-o"></i> Today</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h4>
													Sales Department
													<small><i class="fa fa-clock-o"></i> Yesterday</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
										<li>
											<a href="#">
												<h4>
													Reviewers
													<small><i class="fa fa-clock-o"></i> 2 days</small>
												</h4>
												<p>Why not buy a new awesome theme?</p>
											</a>
										</li>
									</ul>
								</li>
								<li class="footer"><a href="#">See All Messages</a></li>
							</ul>
						</li>
						<!-- Messages Section Ends-->
						<!-- Notifications Section Starts -->
						<li class="dropdown notifications-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-bell-o"></i>
								<span class="label label-warning">10</span>
							</a>
							<ul class="dropdown-menu">
								<li class="header">You have 10 notifications</li>
								<li>
									<!-- Inner Menu Starts -->
									<ul class="menu">
										<li>
											<a href="#">
												<i class="fa fa-users text-aqua"></i> 5 new members joined today
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-users text-red"></i> 5 new members joined
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-shopping-cart text-green"></i> 25 sales made
											</a>
										</li>
										<li>
											<a href="#">
												<i class="fa fa-user text-red"></i> You changed your username
											</a>
										</li>
									</ul>
								</li>
								<li class="footer"><a href="#">View all</a></li>
							</ul>
						</li>
						<!-- Notifications Section Ends -->
						<!-- Tasks Section Starts -->
						<li class="dropdown tasks-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<i class="fa fa-flag-o"></i>
								<span class="label label-danger">9</span>
							</a>
							<ul class="dropdown-menu">
								<li class="header">You have 9 tasks</li>
								<li>
									<!-- Inner Menu Starts -->
									<ul class="menu">
										<!-- Task Item Starts -->
										<li>
											<a href="#">
												<h3>
													Design some buttons
													<small class="pull-right">20%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">20% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>
													Create a nice theme
													<small class="pull-right">40%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">40% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>
													Some task I need to do
													<small class="pull-right">60%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">60% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<li>
											<a href="#">
												<h3>
													Make beautiful transitions
													<small class="pull-right">80%</small>
												</h3>
												<div class="progress xs">
													<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
														<span class="sr-only">80% Complete</span>
													</div>
												</div>
											</a>
										</li>
										<!-- Task Item Ends -->
									</ul>
								</li>
								<li class="footer">
									<a href="#">View all tasks</a>
								</li>
							</ul>
						</li>
						<!-- Tasks Section Ends -->
						<!-- User Account Section Starts -->
						<li class="dropdown user user-menu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
								<img src="../../assets/images/user2-160x160.jpg" class="user-image" alt="User Image">
								<span class="d-none d-sm-block">Alexander Pierce</span>
							</a>
							<ul class="dropdown-menu">
								<!-- User Image Starts -->
								<li class="user-header">
									<img src="../../assets/images/user2-160x160.jpg" class="img-circle" alt="User Image">
									<p>
										Alexander Pierce - Web Developer
										<small>Member since Nov. 2012</small>
									</p>
								</li>
								<!-- User Image Starts -->
								<!-- Menu Body Starts -->
								<li class="user-body">
									<div class="row">
										<div class="col-4 text-center">
											<a href="#">Followers</a>
										</div>
										<div class="col-4 text-center">
											<a href="#">Sales</a>
										</div>
										<div class="col-4 text-center">
											<a href="#">Friends</a>
										</div>
									</div>
								</li>
								<!-- Menu Body Ends -->
								<!-- Menu Footer Starts -->
								<li class="user-footer">
									<div class="pull-left">
										<a href="#" class="btn btn-default btn-flat">Profile</a>
									</div>
									<div class="pull-right">
										<a href="#" class="btn btn-default btn-flat">Sign out</a>
									</div>
								</li>
								<!-- Menu Footer Ends -->
							</ul>
						</li>
						<!-- User Account Section Ends -->
					</ul>
				</div>
			</nav>
		</header>
		<!-- Header Section Ends -->
        
		<aside class="main-sidebar">
			<!-- Sidebar Section Starts -->
			<div class="nano">
				<div class="nano-content">
					<ul class="sidebar-menu" data-widget="tree">
						<li class="header">MAIN NAVIGATION</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-dashboard"></i> <span>Dashboard</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
								<li><a href="../../index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-files-o"></i>
								<span>Layout Options</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
								<li><a href="../../pages/layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
							</ul>
						</li>
						
						<li class="treeview">
							<a href="#">
								<i class="fa fa-pie-chart"></i>
								<span>Charts</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li class="treeview">
									<a href="#"><i class="fa fa-circle-o"></i>
										<span>ChartJS</span>
										<span class="pull-right-container">
											<i class="fa fa-angle-left pull-right"></i>
										</span>
									</a>
									<ul class="treeview-menu">
										<li><a href="../../pages/charts/pie-chart.html"><i class="fa fa-circle-o"></i> Pie Chart</a></li>
										<li><a href="../../pages/charts/line-chart.html"><i class="fa fa-circle-o"></i> Line Chart</a></li>
										<li><a href="../../pages/charts/bar-chart.html"><i class="fa fa-circle-o"></i> Bar Chart</a></li>
									</ul>
								</li>
								<li><a href="../../pages/charts/sparkline.html"><i class="fa fa-circle-o"></i> Sparkline</a></li>
								<li><a href="../../pages/charts/flot-chart.html"><i class="fa fa-circle-o"></i> Flot Charts</a></li>
								
							</ul>
						</li>
						<li class="treeview active">
							<a href="#">
								<i class="fa fa-laptop"></i>
								<span>UI Elements</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								
								<li><a href="../../pages/elements/font-awesome-icons.html"><i class="fa fa-circle-o"></i> Icons</a></li>
								<li><a href="../../pages/elements/buttons.html"><i class="fa fa-circle-o"></i> Buttons</a></li>
								<li><a href="../../pages/elements/hr-timeline.html"><i class="fa fa-circle-o"></i> Horizontal Timeline</a></li>
								<li><a href="../../pages/elements/timeline.html"><i class="fa fa-circle-o"></i> Vertical Timeline</a></li>
								<li class="active"><a href="../../pages/elements/modals.html"><i class="fa fa-circle-o"></i> Modals</a></li>
								<li><a href="../../pages/elements/sweet-alert.html"><i class="fa fa-circle-o"></i> Sweet Alerts</a></li>
								<li><a href="../../pages/elements/accordion.html"><i class="fa fa-circle-o"></i> Accordions</a></li>
								<li><a href="../../pages/elements/progressbars.html"><i class="fa fa-circle-o"></i> Progress Bars</a></li>
								<li><a href="../../pages/elements/toastr.html"><i class="fa fa-circle-o"></i> Toastr</a></li>
								<li><a href="../../pages/elements/alerts.html"><i class="fa fa-circle-o"></i> Alert Box</a></li>
								<li><a href="../../pages/elements/tooltip.html"><i class="fa fa-circle-o"></i> Tool Tip</a></li>
								<li><a href="../../pages/elements/knob.html"><i class="fa fa-circle-o"></i> Knob</a></li>
								<li><a href="../../pages/elements/slider.html"><i class="fa fa-circle-o"></i> Carousel</a></li>
								<li><a href="../../pages/elements/pricing-table.html"><i class="fa fa-circle-o"></i> Pricing Tables</a></li>
								<li><a href="../../pages/elements/range-slider.html"><i class="fa fa-circle-o"></i> Range Slider</a></li>
								<li><a href="../../pages/elements/dropdowns.html"><i class="fa fa-circle-o"></i> Dropdowns</a></li>
								<li><a href="../../pages/elements/grid-list.html"><i class="fa fa-circle-o"></i> Grid/List</a></li>
								<li><a href="../../pages/elements/list-group.html"><i class="fa fa-circle-o"></i> List Group</a></li>
								<li><a href="../../pages/elements/cards.html"><i class="fa fa-circle-o"></i> Cards</a></li>
								<li><a href="../../pages/elements/tabs.html"><i class="fa fa-circle-o"></i> Tabs & Pills</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-edit"></i> <span>Forms</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/forms/general.html"><i class="fa fa-circle-o"></i> General Elements</a></li>
								<li><a href="../../pages/forms/advanced.html"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
								<li><a href="../../pages/forms/editors.html"><i class="fa fa-circle-o"></i> Editors</a></li>
								<li><a href="../../pages/forms/form-wizard.html"><i class="fa fa-circle-o"></i> Form Wizard</a></li><li><a href="../../pages/forms/file-upload.html"><i class="fa fa-circle-o"></i> File Upload</a></li>
								<li><a href="../../pages/forms/form-mask.html"><i class="fa fa-circle-o"></i> Formatter</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-table"></i> <span>Tables</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/tables/basic.html"><i class="fa fa-circle-o"></i> Basic tables</a></li>
								<li><a href="../../pages/tables/advanced.html"><i class="fa fa-circle-o"></i> Advanced tables</a></li>
								<li><a href="../../pages/tables/nestable.html"><i class="fa fa-circle-o"></i> NesTable</a></li>
							</ul>
						</li>
						<li>
							<a href="../../pages/calendar.html">
								<i class="fa fa-calendar"></i> <span>Calendar</span>
							</a>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-envelope"></i> <span>Mailbox</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/mailbox/inbox.html"><i class="fa fa-circle-o"></i> Inbox</a></li>
								<li><a href="../../pages/mailbox/compose.html"><i class="fa fa-circle-o"></i> Compose</a></li>
								<li><a href="../../pages/mailbox/read-mail.html"><i class="fa fa-circle-o"></i> Read</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-map-o"></i> <span>Maps</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/maps/google-map.html"><i class="fa fa-circle-o"></i> Google Map</a></li>
								<li><a href="../../pages/maps/jvector-map.html"><i class="fa fa-circle-o"></i> jVector Map</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-folder"></i> <span>Custom Pages</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="../../pages/custompages/invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
								<li><a href="../../pages/custompages/profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
								<li class="treeview">
									<a href="#"><i class="fa fa-circle-o"></i> Login
										<span class="pull-right-container">
											<i class="fa fa-angle-left pull-right"></i>
										</span>
									</a>
									<ul class="treeview-menu">
										<li><a href="../../pages/custompages/login1.html"><i class="fa fa-circle-o"></i> Login Page 1</a></li>
										<li><a href="../../pages/custompages/login2.html"><i class="fa fa-circle-o"></i> Login Page 2</a></li>
										<li><a href="../../pages/custompages/login3.html"><i class="fa fa-circle-o"></i> Login Page 3</a></li>
									</ul>
								</li>
								<li><a href="../../pages/custompages/register.html"><i class="fa fa-circle-o"></i> Register</a></li>
								<li><a href="../../pages/custompages/lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
								<li><a href="../../pages/custompages/404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
								<li><a href="../../pages/custompages/500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
								<li><a href="../../pages/custompages/blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
							</ul>
						</li>
						<li class="treeview">
							<a href="#">
								<i class="fa fa-share"></i> <span>Multilevel</span>
								<span class="pull-right-container">
									<i class="fa fa-angle-left pull-right"></i>
								</span>
							</a>
							<ul class="treeview-menu">
								<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
								<li class="treeview">
									<a href="#"><i class="fa fa-circle-o"></i> Level One
										<span class="pull-right-container">
											<i class="fa fa-angle-left pull-right"></i>
										</span>
									</a>
									<ul class="treeview-menu">
										<li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
										<li class="treeview">
											<a href="#"><i class="fa fa-circle-o"></i> Level Two
												<span class="pull-right-container">
													<i class="fa fa-angle-left pull-right"></i>
												</span>
											</a>
											<ul class="treeview-menu">
												<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
												<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
							</ul>
						</li>
						
						<li class="header">LABELS</li>
						<li><a href="#"><i class="fa fa-circle-o text-danger"></i> <span>Important</span></a></li>
						<li><a href="#"><i class="fa fa-circle-o text-warning"></i> <span>Warning</span></a></li>
						<li><a href="#"><i class="fa fa-circle-o text-info"></i> <span>Information</span></a></li>
					</ul>
				</div>
			</div>
		</aside>  
		<!-- Sidebar Section Ends -->

		<!-- Page Content Starts-->
		<div class="content-wrapper">
			<section class="content-header">
				<h1>
					Modals
					<small>Elements</small>
				</h1>
				<ol class="breadcrumb">
					<li><a href="../../index.html"><i class="fa fa-dashboard"></i> Home</a></li>
					<li><a href="#">Elements</a></li>
					<li class="active">Modals</li>
				</ol>
			</section>
			<div class="modals">
				<!-- Default Modals Section Starts -->
				<div class="cardbg">
					<h6 class="title-inner text-uppercase">Default Modals</h6>
					<!-- Button trigger modal -->
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
						Launch demo modal
					</button>
					<!-- Modal -->
					<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
									<button type="button" class="btn btn-primary">Save changes</button>
								</div>
							</div>
						</div>
					</div>
					<!-- Button trigger modal -->
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
						Launch demo modal
					</button>
					<!-- Modal -->
					<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog modal-dialog-centered" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
									<button type="button" class="btn btn-primary">Save changes</button>
								</div>
							</div>
						</div>
					</div>
					<!-- Button trigger modal -->
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal1" data-whatever="@mdo">Open modal for @mdo</button>
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal1" data-whatever="@fat">Open modal for @fat</button>
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal1" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

					<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
					  <div class="modal-dialog" role="document">
						<div class="modal-content">
						  <div class="modal-header">
							<h5 class="modal-title" id="exampleModalLabel">New message</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							  <span aria-hidden="true">&times;</span>
							</button>
						  </div>
						  <div class="modal-body">
							<form>
							  <div class="form-group">
								<label for="recipient-name" class="col-form-label">Recipient:</label>
								<input type="text" class="form-control" id="recipient-name">
							  </div>
							  <div class="form-group">
								<label for="message-text" class="col-form-label">Message:</label>
								<textarea class="form-control" id="message-text"></textarea>
							  </div>
							</form>
						  </div>
						  <div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
							<button type="button" class="btn btn-primary">Send message</button>
						  </div>
						</div>
					  </div>
					</div>
					<!-- Large modal -->
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

					<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
					  <div class="modal-dialog modal-lg">
						<div class="modal-content">
							<div class="modal-body">
							  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
							</div>
						</div>
					  </div>
					</div>

					<!-- Small modal -->
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

					<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
					  <div class="modal-dialog modal-sm">
						<div class="modal-content">
							<div class="modal-body">
							  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
							</div>
						</div>
					  </div>
					</div>
				</div>
				<!-- Default Modals Section Ends -->
				<!-- Animation Modals Section Starts -->
				<div class="cardbg">
					<h6 class="title-inner text-uppercase">Animation Modals</h6>
					<a href="#costumModal30" role="button" class="btn btn-primary" data-toggle="modal">
						bounce
					</a>
					<div id="costumModal30" class="modal" data-easein="bounce"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal10" role="button" class="btn btn-primary" data-toggle="modal">
						bounceIn
					</a>
					<div id="costumModal10" class="modal" data-easein="bounceIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal11" role="button" class="btn btn-primary" data-toggle="modal">
						bounceUpIn
					</a>
					<div id="costumModal11" class="modal" data-easein="bounceUpIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal12" role="button" class="btn btn-primary" data-toggle="modal">
						bounceDownIn
					</a>
					<div id="costumModal12" class="modal" data-easein="bounceDownIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal13" role="button" class="btn btn-primary" data-toggle="modal">
						bounceLeftIn
					</a>
					<div id="costumModal13" class="modal" data-easein="bounceLeftIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal15" role="button" class="btn btn-primary" data-toggle="modal">
						bounceRightIn
					</a>
					<div id="costumModal15" class="modal" data-easein="bounceRightIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal31" role="button" class="btn btn-primary" data-toggle="modal">
						flash
					</a>
					<div id="costumModal31" class="modal" data-easein="flash"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal1" role="button" data-target="#costumModal1" class="btn btn-primary" data-toggle="modal">
						fadeIn
					</a>
					<div id="costumModal1" class="modal" data-easein="fadeIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="false">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal2" role="button" class="btn btn-primary" data-toggle="modal">
						flipXIn
					</a>
					<div id="costumModal2" class="modal" data-easein="flipXIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal3" role="button" class="btn btn-primary" data-toggle="modal">
						flipYIn
					</a>
					<div id="costumModal3" class="modal" data-easein="flipYIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal4" role="button" class="btn btn-primary" data-toggle="modal">
						flipBounceXIn
					</a>
					<div id="costumModal4" class="modal" data-easein="flipBounceXIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal5" role="button" class="btn btn-primary" data-toggle="modal">
						flipBounceYIn
					</a>
					<div id="costumModal5" class="modal" data-easein="flipBounceYIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<br/>
					<a href="#costumModal6" role="button" class="btn btn-primary" data-toggle="modal">
						swoopIn
					</a>
					<div id="costumModal6" class="modal" data-easein="swoopIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal7" role="button" class="btn btn-primary" data-toggle="modal">
						whirlIn
					</a>
					<div id="costumModal7" class="modal" data-easein="whirlIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal8" role="button" class="btn btn-primary" data-toggle="modal">
						shrinkIn
					</a>
					<div id="costumModal8" class="modal" data-easein="shrinkIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal9" role="button" class="btn btn-primary" data-toggle="modal">
						expandIn
					</a>
					<div id="costumModal9" class="modal" data-easein="expandIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal16" role="button" class="btn btn-primary" data-toggle="modal">
						slideUpIn
					</a>
					<div id="costumModal16" class="modal" data-easein="slideUpIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					
					<a href="#costumModal17" role="button" class="btn btn-primary" data-toggle="modal">
						slideDownIn
					</a>
					<div id="costumModal17" class="modal" data-easein="slideDownIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					
					<a href="#costumModal18" role="button" class="btn btn-primary" data-toggle="modal">
						slideLeftIn
					</a>
					<div id="costumModal18" class="modal" data-easein="slideLeftIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					
					<a href="#costumModal14" role="button" class="btn btn-primary" data-toggle="modal">
						slideRightIn
					</a>
					<div id="costumModal14" class="modal" data-easein="slideRightIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					
					<a href="#costumModal19" role="button" class="btn btn-primary" data-toggle="modal">
						slideUpBigIn
					</a>
					<div id="costumModal19" class="modal" data-easein="slideUpBigIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					
					<a href="#costumModal20" role="button" class="btn btn-primary" data-toggle="modal">
						slideDownBigIn
					</a>
					<div id="costumModal20" class="modal" data-easein="slideDownBigIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					
					<a href="#costumModal21" role="button" class="btn btn-primary" data-toggle="modal">
						slideLeftBigIn
					</a>
					<div id="costumModal21" class="modal" data-easein="slideLeftBigIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<br/>
					<a href="#costumModal22" role="button" class="btn btn-primary" data-toggle="modal">
						slideRightBigIn
					</a>
					<div id="costumModal22" class="modal" data-easein="slideRightBigIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					
					<a href="#costumModal23" role="button" class="btn btn-primary" data-toggle="modal">
						perspectiveUpIn
					</a>
					<div id="costumModal23" class="modal" data-easein="perspectiveUpIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					
					<a href="#costumModal24" role="button" class="btn btn-primary" data-toggle="modal">
						perspectiveDownIn
					</a>
					<div id="costumModal24" class="modal" data-easein="perspectiveDownIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					
					<a href="#costumModal25" role="button" class="btn btn-primary" data-toggle="modal">
						perspectiveLeftIn
					</a>
					<div id="costumModal25" class="modal" data-easein="perspectiveLeftIn"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					
					<a href="#costumModal26" role="button" class="btn btn-primary" data-toggle="modal">
						perspectiveRightIn
					</a>
					<div id="costumModal26" class="modal" data-easein="perspectiveRightIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					
					<a href="#costumModal27" role="button" class="btn btn-primary" data-toggle="modal">
						shake
					</a>
					<div id="costumModal27" class="modal" data-easein="shake"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					
					<a href="#costumModal28" role="button" class="btn btn-primary" data-toggle="modal">
						tada
					</a>
					<div id="costumModal28" class="modal" data-easein="tada"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal29" role="button" class="btn btn-primary" data-toggle="modal">
						swing
					</a>
					<div id="costumModal29" class="modal" data-easein="swing" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
					<a href="#costumModal32" role="button" class="btn btn-primary" data-toggle="modal">
						pulse
					</a>
					<div id="costumModal32" class="modal" data-easein="pulse"  tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Modal Header</h5>
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								</div>
								<div class="modal-body">
									<p>
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
										quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
										cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
										proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
									</p>
								</div>
								<div class="modal-footer">
									<button class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">
										Close
									</button>
									<button class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- Animation Modals Section Ends -->
				<!-- Modals With Background Section Starts -->
				<div class="cardbg">
					<h6 class="title-inner text-uppercase">Modals with Background</h6>
					<!-- Button trigger modal -->
					<button type="button" class="btn btn-default" data-toggle="modal" data-target="#exampleModal">
						Launch default modal
					</button>
					<!-- Default Modal -->
					<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
									<button type="button" class="btn btn-primary">Save changes</button>
								</div>
							</div>
						</div>
					</div>
					<!-- Button trigger modal -->
					<!-- Button trigger modal -->
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalprimary">
						Launch primary modal
					</button>
					<!-- Info Modal -->
					<div class="modal fade" id="exampleModalprimary" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog" role="document">
							<div class="modal-content modal-primary">
								<div class="modal-header">
									<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn" data-dismiss="modal">Close</button>
									<button type="button" class="btn">Save changes</button>
								</div>
							</div>
						</div>
					</div>
					<!-- Button trigger modal -->
					<!-- Button trigger modal -->
					<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModalinfo">
						Launch info modal
					</button>
					<!-- Info Modal -->
					<div class="modal fade" id="exampleModalinfo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog" role="document">
							<div class="modal-content modal-info">
								<div class="modal-header">
									<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn" data-dismiss="modal">Close</button>
									<button type="button" class="btn">Save changes</button>
								</div>
							</div>
						</div>
					</div>
					<!-- Button trigger modal -->
					<!-- Button trigger modal -->
					<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModaldanger">
						Launch danger modal
					</button>
					<!-- Danger Modal -->
					<div class="modal fade" id="exampleModaldanger" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog" role="document">
							<div class="modal-content modal-danger">
								<div class="modal-header">
									<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn" data-dismiss="modal">Close</button>
									<button type="button" class="btn">Save changes</button>
								</div>
							</div>
						</div>
					</div>
					<!-- Button trigger modal -->
					<!-- Button trigger modal -->
					<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModalwarning">
						Launch warning modal
					</button>
					<!-- Warning Modal -->
					<div class="modal fade" id="exampleModalwarning" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog" role="document">
							<div class="modal-content modal-warning">
								<div class="modal-header">
									<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn" data-dismiss="modal">Close</button>
									<button type="button" class="btn">Save changes</button>
								</div>
							</div>
						</div>
					</div>
					<!-- Button trigger modal -->
					<!-- Button trigger modal -->
					<button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModalsuccess">
						Launch success modal
					</button>
					<!-- Success Modal -->
					<div class="modal fade" id="exampleModalsuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog" role="document">
							<div class="modal-content modal-success">
								<div class="modal-header">
									<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn" data-dismiss="modal">Close</button>
									<button type="button" class="btn">Save changes</button>
								</div>
							</div>
						</div>
					</div>
					<!-- Button trigger modal -->
				</div>
				<!-- Modals With Background Section Ends -->
			</div>
		</div>
		<!-- Page Content Ends -->
		
		<!-- Back to Top Starts -->
		<a href="javascript:" id="return-to-top"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
		<!-- Back to Top Ends -->
		
		<!-- Footer Section Starts -->
		<footer class="main-footer">
			<div class="pull-right hidden-xs">
			  Version 1.0.0
			</div>
			<p class="mb-0">Copyright © 2019 <a target="_blank" href="http://www.bootstrapmb.com/">Perfectus Inc</a>. All rights
			reserved.</p>
		</footer>
		<!-- Footer Section Ends -->
		
	</div>

	<!-- jQuery CDN - Slim version (=without AJAX) -->
	<script src="../../assets/js/jquery/slim.min.js"></script>
	<!-- Popper.JS -->
	<script src="../../assets/js/jquery/popper.min.js"></script>
	<!-- Bootstrap JS -->
	<script src="../../assets/js/jquery/jquery.min.js"></script>
	<script src="http://cdn.bootstrapmb.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
	<!-- Page JS -->
	<script src="../../assets/js/elements/modals/velocity.min.js"></script>
	<script src="../../assets/js/elements/modals/velocity.ui.min.js"></script>
	<!-- Theme JS -->
	<script src="../../assets/js/nanoscroller/nanoscroller.js"></script>
	<script src="../../assets/js/custom/theme.js"></script>
	<script type="text/javascript">
	$(".modal").each(function(l){$(this).on("show.bs.modal",function(l){var o=$(this).attr("data-easein");"shake"==o?$(".modal-dialog").velocity("callout."+o):"pulse"==o?$(".modal-dialog").velocity("callout."+o):"tada"==o?$(".modal-dialog").velocity("callout."+o):"flash"==o?$(".modal-dialog").velocity("callout."+o):"bounce"==o?$(".modal-dialog").velocity("callout."+o):"swing"==o?$(".modal-dialog").velocity("callout."+o):$(".modal-dialog").velocity("transition."+o)})});
	</script>
</body>

</html>
